import React, { Component } from 'react'
import { CheckOutlined } from '@ant-design/icons';
import { Button, Input, List, Modal, Tabs } from 'antd';

class AudioMultipleRelationModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // audioModalVisible:true,
      targetLabelIndex: 0, //
      currentRelation: ''
    };
  }

  componentDidMount() {
    // this.props.onRef(this)
  }

  componentWillReceiveProps(nextProps) {
    if (this.state.targetLabelIndex !==0 && !this.props.audioMultipleRelationModalVisible){
      this.setState({targetLabelIndex:0})
    }
  }

  componentWillUnmount() {
    this.setState({targetLabelIndex:0})
  }

  audioModalOnCancel(type) {
    const { targetLabelIndex } = this.state
    const { multipleRelationTargetLabel, multipleRelationObj } = this.props
    if (targetLabelIndex < multipleRelationTargetLabel.length) {
      // 还有未进行标注的目标标签
      if (type === 'markAll') {
        multipleRelationObj[multipleRelationTargetLabel[targetLabelIndex]].length > 1 && multipleRelationObj[multipleRelationTargetLabel[targetLabelIndex]].map(item => {
          this.clickMarkButton(item,'markAll')
        })
        this.setState({targetLabelIndex:
            targetLabelIndex + 1 < multipleRelationTargetLabel.length ? this.state.targetLabelIndex + 1 : 0
        })
      }
      if (targetLabelIndex + 1 === multipleRelationTargetLabel.length){
        // 点击最后一个x
        this.props.multipleRelationCancelCallback()
        return;
      }
      this.setState({targetLabelIndex: this.state.targetLabelIndex + 1})
    } else {
      this.props.multipleRelationCancelCallback()
    }
  }

  handleCancel () {
    this.setState({ visible: false });
  }

  getLabelNameByIndex(index) {
    // 根据实体index，查询两个实体之间的所有关系名称
    if (!index) return
    const { initTxtArr } = this.props
    const labelName = initTxtArr[index].split('$_#_$')[0]
    return labelName
  }
  getIdByIndex(index) {
    // 根据实体index，查id
    if (!index) return
    const { initTxtArr } = this.props
    const id = initTxtArr[index].split('$_#_$')[3]
    return id
  }
  clickMarkButton (item, markType = 'single') {
    // 进行标注
    const { initTxtArr, multipleRelationStartLabel, multipleRelationTargetLabel } = this.props;
    const { targetLabelIndex } = this.state;
    const labelArr = initTxtArr[multipleRelationTargetLabel[targetLabelIndex].replace('#', '')].split('$_#_$')
    this.props.markCallback(multipleRelationStartLabel.replace('#', ''), `${labelArr[3]}#_#${labelArr[0]}`, item.labelRelationName,markType)
  }
  onMouseEnterItem(item){
    this.setState({currentRelation: item.labelRelationName})
  }

  onMouseLeaveItem(item){
    this.setState({currentRelation: ""})
  }
  render() {
    const { audioMultipleRelationModalVisible, multipleRelationObj, multipleRelationTargetLabel, multipleRelationStartLabel } = this.props;
    const { targetLabelIndex, currentRelation } = this.state;
    // @ts-ignore
    return <>
      <Modal
        style={{ top: 400 }}
        title="语音标注"
        visible={audioMultipleRelationModalVisible}
        // visible={true}
        // onOk={this.handleOk}
        mask={false}
        maskClosable={false}
        onCancel={this.audioModalOnCancel.bind(this, "cancel")}
        footer={[
          <Button type="primary" onClick={this.audioModalOnCancel.bind(this, 'markAll')}>
            全部标注
          </Button>,
        ]}
        // closable={false}
        zIndex={32}
        width={610}
      >
        <div style={{ padding: '15px 0px', display: 'flex' }}>
          起始标签：
          <div style={{ color: '#888888', width: 400, border: '1px solid', borderRadius: 2 }}>{multipleRelationStartLabel}&nbsp;
            {this.getLabelNameByIndex(multipleRelationStartLabel.replace('#', ''))}
          </div>
        </div>
        <div style={{ padding: '15px 0px', display: 'flex' }}>
          目标标签：
          <div style={{ color: '#888888', width: 400, border: '1px solid', borderRadius: 2 }}>{multipleRelationTargetLabel[targetLabelIndex]}&nbsp;
            {multipleRelationTargetLabel.length > 0 && this.getLabelNameByIndex(multipleRelationTargetLabel[targetLabelIndex].replace('#', ''))}
          </div>
          </div>
        {multipleRelationTargetLabel.length > 0 && <List
          header={<div>关系标签</div>}
          footer={null}
          bordered
          size="small"
          style={{height:233,overflowY:'auto'}}
          dataSource={multipleRelationObj[multipleRelationTargetLabel[targetLabelIndex]]}
          renderItem={item => (
            <List.Item
              onMouseEnter={this.onMouseEnterItem.bind(this, item)}
              onMouseLeave={this.onMouseLeaveItem.bind(this)}
            >
              { item.labelRelationName && currentRelation === item.labelRelationName && item.labelRelationName.length>25 ? item.labelRelationName.slice(0,25) +'...': item.labelRelationName}
              {
                currentRelation === item.labelRelationName && this.props.relationArr.indexOf(
                  this.getIdByIndex(multipleRelationStartLabel.replace('#', '')) + '#_$_#' + item.labelRelationName+'#_$_#'
                  + this.getIdByIndex(multipleRelationTargetLabel[targetLabelIndex].replace('#', ''))
                ) ===-1&& <span style={{float: 'right', color: '#29ccb1', cursor: 'pointer'}} onClick={this.clickMarkButton.bind(this, item)}><CheckOutlined />
                    标注
                    </span>
              }
              {
                <span style={{float: 'right', color: '#29ccb1', cursor: 'pointer'}}>
                  {this.props.relationArr.indexOf(
                    this.getIdByIndex(multipleRelationStartLabel.replace('#', '')) + '#_$_#' + item.labelRelationName+'#_$_#'
                    + this.getIdByIndex(multipleRelationTargetLabel[targetLabelIndex].replace('#', ''))
                  ) ===-1 ?
                    ''
                    :
                    <span style={{color: '#808080'}}>已标注</span>
                  }
                </span>
              }
            </List.Item>
          )}
        />}
      </Modal>
    </>;
  }
}

export default AudioMultipleRelationModal
